<!-- Site Setting Panel -->
  <section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<!-- Page Header Start -->
<div class="pageheader">
  <h2><i class="fa fa-line-chart"></i> Flot Chart </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="#"> Home </a> </li>
      <li class="active"> Flot </li>
    </ol>
  </div>
</div>
<!-- Page Header End -->

<!-- Flot Chart Body Start -->
<div class="page" data-ng-controller="flotChartCtrl">
  <div class="row">
  
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Flot Bar Chart (negative)</h3> 
        </div>
        <div class="panel-body">
          <div data-flot-chart data="barChart3.data" data-options="barChart3.options" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
    </div>
    
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Simple Flot Bar Chart</h3> 
        </div>
        <div class="panel-body">
          <div data-flot-chart data="barChart4.data" data-options="barChart4.options" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
    </div>
    
  </div>
  
  <div class="row">

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Flot Spline Chart</h3> 
        </div>
        <div class="panel-body">
          <div data-flot-chart data="line1.data" data-options="line1.options" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Flot Stacked Bar Chart </h3> 
        </div>
        <div class="panel-body">
          <div data-flot-chart data="barChart.data" data-options="barChart.options" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
    </div>
    
  </div>

  <div class="row">

    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Flot Realtime Chart </h3> 
        </div>
        <div class="panel-body">
          <div data-flot-chart-realtime data-type="realtime" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
    </div>
    
  </div>
  
  <div class="row">
  
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Flot Line and Area Chart </h3> 
        </div>
        <div class="panel-body">
          <div data-flot-chart data="area.data" data-options="area.options" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
    </div>
    
  </div>

  <div class="row">

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Flot Pie Chart </h3> 
        </div>
        <div class="panel-body">
          <div data-flot-chart data="pieChart.data" data-options="pieChart.options" style="width: 100%; height: 250px;"></div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Flot Donut Chart </h3> 
        </div>
        <div class="panel-body">
          <div data-flot-chart data="donutChart.data" data-options="donutChart.options" style="width: 100%; height: 250px;"></div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
           <h3 class="panel-title"> Flot Styled Donut Chart </h3> 
        </div>
        <div class="panel-body">
          <div data-flot-chart data="donutChart2.data" data-options="donutChart2.options" style="width: 100%; height: 250px;"></div>
        </div>
      </div>
    </div>
    
  </div>
  
</div>
<!-- Flot Chart Body End -->